import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import { MessageListProps } from "@/components/__utils__/prop";
import warning from "@/utils/warning";

const name = "MessageList";

@Component({
  name,
})
class MessageList extends Vue implements MessageListProps {
  protected messageListClass = "a-message";
  @Prop()
  messageList!: Array<any>;
  @Prop()
  dotString!: string;
  static install: (Vue: any) => void;
  @Emit("click")
  messageListClick(k: any) {
    return k;
  }

  render() {
    const { messageList, dotString } = this.$props as MessageListProps;
    const { messageListClass, messageListClick } = this;
    if (!messageList || !messageList.length) {
      warning(!!messageList, "MessageList", "数据源是必须的");
      return;
    }

    return (
      <div class={`${messageListClass}`}>
        {messageList.map((item) => {
          return (
            <div class={`${messageListClass}-list`}>
              <div class={`${messageListClass}-list-item`}>
                <div class={`${messageListClass}-list-item-title`}>
                  {item.isRead === 0 ? (
                    <a-badge offset={[2, -2]} dot={true}>
                      <span>{item.title}</span>
                    </a-badge>
                  ) : (
                    <span>{item.title}</span>
                  )}
                  <span>{item.createTime}</span>
                </div>
                <div class={`${messageListClass}-list-item-content`}>
                  {item.content}
                </div>
                <a-button
                  onclick={() => messageListClick(item)}
                  type="link"
                  class={`${messageListClass}-list-item-button`}
                >
                  {item.status && item.isDone !== 1 ? "去审批" : "去查看"}
                </a-button>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

MessageList.install = function(Vue) {
  Vue.component(name, MessageList);
};

export default MessageList;
